import { View, Text } from '@tarojs/components'
import Taro, { useLoad } from '@tarojs/taro'
import { useState } from 'react'

import './index.scss'

export default function Index () {
  const [statusBarHeight, setStatusBarHeight] = useState<number>(0) // 最顶部状态栏 高度
  const [barHeight, setBarHeight] = useState<number>(0) // 顶部自定义 bar 高度
  const statusStyle = {
    background:'yellow',
    paddingTop:`${statusBarHeight}px`,
    height: `${barHeight}px`,
    display: 'flex',
    justifyContent: 'center'
  }

  useLoad(() => {
    // 状态栏高度
    setStatusBarHeight(Taro.getSystemInfoSync().statusBarHeight as number)
    // 胶囊高度
    const { height } = Taro.getMenuButtonBoundingClientRect()
    setBarHeight(height)
  })

  return (
    <View className='index'>
      <View className='title' style={statusStyle}>明细</View>
    </View>
  )
}
